<template>
<!-- @close触发的时机，无论是确定还是取消，只要对话框消失，则直接调用。这样数据清空，就一直报错。async等待的是里面的那个函数，
async相当于异步微任务，
而消失，则是同步任务，所以后面那个先执行。
 -->
  <el-dialog :title="title" :visible="showDialog" @close="cancelDialog">
    <el-form
      :model="form"
      label-position="right"
      label-width="120px"
      v-loading="loading"
      :rules="rules"
      ref="setForm"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="form.description" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="confirmBtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRoleDetail, getRoleList, updateRole, addRole } from "@/api/setting";
export default {
  name: "Dialog",
  data() {
    const checkRole = async (rule, value, callback) => {
      let result = await getRoleList({ page: 1, pagesize: 10 });
      let isRepeat;
      if(this.form.id){
         isRepeat = result.rows.some(
        (item) => item.id != this.detail.id && item.name == value
      )
      console.log("repeate", isRepeat);
      }else{
        isRepeat = result.rows.some(item=>item.name==value);
      }
      isRepeat == true ? callback(new Error("已经有该角色了")) : callback();
    };
    return {
      form: {
        name: "",
        description: "",
      },
      rules: {
        name: [
          { required: true, message: "不能角色名为空", trigger: "blur" },
          {
            trigger:'blur',validator:checkRole,
          }
        ],
      },
      loading: false,
    };
  },
  props: ["showDialog", "detail"],
  methods: {
    cancelDialog() {
      this.form = {};
      this.$emit("update:showDialog", false);
       this.$refs.setForm.resetFields();
    },
    async getDetail(id) {
      this.loading = true;
      const result = await getRoleDetail(id);
      // console.log(result);
      this.form = result;
      //   console.log(this.form);
      this.loading = false;
    },
    confirmBtn() {
      this.$refs.setForm.validate(async (valid) => {
        if (valid) {
          try {
            // console.log("valid", valid);
            // console.log("data",this.form);
            if (this.form.id) {
              let result = await updateRole(this.form);
              console.log("222", result);
              this.$message({
                type: "success",
                message: "编辑成功",
              });
            } else {
              let result = await addRole(this.form);
               this.$message({
                type: "success",
                message: "新增成功",
              });
            }
            this.$emit("getRole");
            // this.$emit("update:showDialog", false);
          } catch (error) {
            this.$message({
              type: "info",
              message: "编辑失败",
            });
          }
        } else {
          console.log("错误提交");
        }
        this.$emit("update:showDialog", false);
      });
      // this.$emit("update:showDialog", false);写在这里先清理数据，会产生错误。
    },
  
  },
  computed:{
    title(){
        return this.form.id?"编辑角色":"新增角色";
    }
  }
};
</script>

<style>
</style>